<script setup lang="ts">
import { ElNotification } from 'element-plus'

const props = defineProps<{
  itemInfo: any
}>()

const open = () => {
  ElNotification({
    title: '系统公告',
    dangerouslyUseHTMLString: true,
    type: 'info',
    position: 'bottom-right',
    message: `<h2 style="font-size: 18px; color: #000;">${props.itemInfo.notice_name}</h2><div style="font-size: 12px;">${props.itemInfo.notice_content}</div>`
  })
}
</script>
<template>
  <div class="noticeItemBox">
    <div class="title" @click="open">
      <svg-icon color="#f2b312" className="iconBox" iconName="icon-24gf-volumeHigh"></svg-icon>
      <span class="singeLine">{{ itemInfo.notice_name }}</span>
    </div>
    <div class="time">{{ itemInfo.end_date.slice(0, 10) }}</div>
  </div>
</template>
<style scoped lang="less">
.noticeItemBox {
  width: 100%;
  height: 1.25rem;
  margin: 0.625rem 0;

  .title {
    float: left;
    width: 76%;
    display: flex;
    align-items: center;
    height: 1.25rem;
    line-height: 1.25rem;
    color: var(--cnac-text1);

    .iconBox {
      vertical-align: sub;
    }

    span {
      width: calc(100% - 1.25rem);
      display: inline-block;
      margin-left: 0.5rem;
      font-size: 0.75rem;
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .time {
    float: right;
    font-size: 0.75rem;
    width: 20%;
    min-width: 4.5rem;
    height: 1.25rem;
    color: #999;
  }
}
</style>
